<!-- 商机首页 -->

<template>
    <div>
        <div class="opportunity-head">
            <img src="../../../img/bg.png">
            <div class="opportunity-set has-pointer" @click="goToSetting()">
                <img src="../../../img/setting.png">
                <span htmdEvt='toSetBusiness_btn'>商机设置</span>
            </div>
            <div class="head-box">
                <div class="head-box-left">
                    <p class="left-title">今日新增商机</p>
                    <p class="left-count">{{nowAdd}}<span>条</span></p>
                    <p class="left-no-check">{{unRead}}条未查看</p>
                </div>
                <div class="head-box-right">
                    <img src="../../../img/radar.gif">
                </div>
            </div>
        </div>
        <div class="scroller-block">
            <scroller v-if="!showNoData" style="position: relative;" ref="my_scroller" :on-infinite="infinite"
                      :on-refresh="refresh">
                <div v-for="(item, index) in opportunityList" :key="index">
                    <ul class="opportunity-list">
                        <li class="one has-pointer"
                            @click="goToTargetOpportunity(item.id,item.customerName,item.nickName,item.isCustomer,item.sourceId,item.unionId,item.customerNo,item.universityUnionId)"
                            htmdEvt='goToTargetOpportunity_btn'>
                            <span class="one-left">
                                <span class="name" v-if="item.customerName">{{Array.from(item.customerName).length>8?Array.from(item.customerName).slice(0, 8).join('') + '...':item.customerName}}</span>
                                <span class="name" v-if="!item.customerName&&item.nickName">{{Array.from(item.nickName).length>8?Array.from(item.nickName).slice(0, 8).join('') + '...':item.nickName}}</span>
                                <img class="label" v-if="item.isCustomer" src="../../../img/custLabel.png">
                                <span class="redDot" v-if="item.isAlreadyRead==0"></span>
                            </span>
                            <span class="one-right">{{item.formatDate}}</span>
                        </li>
                        <li class="two">
                            <!--查看文章，进入文章热力图 -->
                            <p style="-webkit-box-orient: vertical;" v-if="item.titleType==4">
                                <span class="two-action">{{item.browseType==0?'查看':(item.browseType==1?'报名':(item.browseType==2?'阅读':''))}}</span>
                                <span class="two-type">文章</span>
                                <span class="two-title has-pointer" htmdEvt='businessSourceByTitle_btn'
                                      @click="goToArticleHeatMap(item.titleId)">{{item.title}}</span>
                            </p>
                            <!--线上活动-->
                            <p style="-webkit-box-orient: vertical;" v-if="item.titleType==5">
                                <span class="two-action">{{item.browseType==0?'查看':(item.browseType==1?'报名':(item.browseType==2?'阅读':''))}}</span>
                                <span class="two-type">线上活动</span>
                                <span class="two-title has-pointer" htmdEvt='businessSourceByTitle_btn'
                                      @click="goToActivityDetail(item.titleType,item.titleId)">{{item.title}}</span>
                            </p>
                            <!-- 视频 -->
                            <p style="-webkit-box-orient: vertical;" v-if="item.titleType==7 || item.titleType==8">
                                <span class="two-action">查看</span>
                                <span class="two-type">视频</span>
                                <span class="two-title has-pointer" htmdEvt='businessSourceByTitle_btn'
                                      @click="goToVideoinfo(item.titleId)">{{item.title}}</span>
                            </p>
                            <!--线下活动-->
                            <p style="-webkit-box-orient: vertical;" v-if="item.titleType==6">
                                <span class="two-action">{{item.browseType==0?'查看':(item.browseType==1?'报名':(item.browseType==2?'阅读':''))}}</span>
                                <span class="two-type">线下活动</span>
                                <span class="two-title has-pointer" htmdEvt='businessSourceByTitle_btn'
                                      @click="goToActivityDetail(item.titleType,item.titleId)">{{item.title}}</span>
                            </p>
                            <!--名片 图文-->
                            <p style="-webkit-box-orient: vertical;" v-if="item.titleType==1||item.titleType==0">
                                <span class="two-action">{{item.browseType==0?'查看':(item.browseType==1?'报名':(item.browseType==2?'阅读':''))}}</span>
                                <span class="two-type">{{item.titleType==0?'图文':'名片'}}</span>
                                <span class="two-title has-pointer" htmdEvt='businessSourceByTitle_btn'
                                      @click="goToShareDetail(item.titleId)">{{item.title}}</span>
                            </p>
                            <!--消息-->
                            <p style="-webkit-box-orient: vertical;" v-if="item.titleType==3">
                                <span v-if="item.customerName" class="two-title has-pointer"
                                      @click="callPhone(item.customerName)"
                                      htmdEvt='businessSourceByTitle_btn'>{{item.title}}</span>
                                <span v-if="!item.customerName" class="two-title has-pointer"
                                      @click="callPhone(item.nickName)"
                                      htmdEvt='businessSourceByTitle_btn'>{{item.title}}</span>
                            </p>
                        </li>
                        <li class="three">
                            <span class="three-left">商机来源：{{item.sourceName}}</span>
                            <span class="three-right has-pointer" htmdEvt='lgb_h5_business_businessOpportunity_2' @click="goToNoteRemind(item.id)">
                                <img src="../../../img/pencil.png">
                                <span>备注提醒</span>
                            </span>
                        </li>
                        <li class="four" v-if="item.remark">
                            <p style="-webkit-box-orient: vertical;">{{item.remark}}</p>
                        </li>
                        <li class="five">
                            <p></p>
                        </li>
                    </ul>
                </div>
            </scroller>
        </div>
        <no-data :showNoData="showNoData" :show="show" style="position:relative;margin-top:4rem;"></no-data>
        <!-- <loading :showLoading="showLoading"></loading> -->
    </div>
</template>

<script>
    window.upDateBusiness = function (statusCode) {
        //1:app获取数据 2:刷新接口
        if (statusCode == 1) {
            // getVueMethod()
        } else if (statusCode == 2) {
            getInit()
        }

    }
    import "./businessOpportunity.less";
    // import "./businessOpportunity.js";
    import noData from '@src/common/components/noData/noData';
    // import loading from '@src/common/loading/loading';
    // import VueScroller from 'vue-scroller';
    // import Vue from 'vue';

    // Vue.use(VueScroller);

    export default {
        name: "businessOpportunity",
        components: {
            noData,
            // loading
        },
        data() {
            return {
                // 分页
                offset: 0,
                // 缺省图flag
                showNoData: false,
                show: 'show',
                // 加载中
                // showLoading: true,
                // 今日新增
                nowAdd: 0,
                // 未读
                unRead: 0,
                // 商机列表
                opportunityList: [],
                // 更新的数组
                ids: []
            };
        },
        created() {
            // this.getData()
            // this.getInitData()
        },
        mounted() {
            // window.getVueMethod = this.upDateRead;
            window.getInit = this.getInitData;
        },
        methods: {
            getInitData() {
                // this.showNoData = false
                this.opportunityList = [];
                this.offset = 0;
                this.$refs.my_scroller.finishInfinite(false)
            },

            // 上拉加载
            infinite(done) {
                console.log('上拉')
                let that = this
                setTimeout(() => {
                    that.offset++    //每当向上滑动的时候就让页数加1
                    that.getData(this.offset, done)
                }, 500)
            },
            // 下拉刷新
            refresh(done) { //这是向下滑动的时候请求最新的数据
                console.log('下拉')
                this.offset = 1
                this.getData(this.offset, done)
            },
            // 全部商机列表
            getData(offset, fn) {
                console.log('全部商机列表')
                this.$axiosHttp.http({
                    name: '',
                    url: apiUrl.allList,
                    needFailCallback: true,
                    method: 'post',
                    params: {
                        pageNow: offset,
                        pageSize: 10
                    }
                }, (res) => {
                    // this.showLoading = false;
                    let data = res.data.data.result;
                    this.nowAdd = data.nowAdd
                    this.unRead = data.unRead
                    if (offset === 1) {
                        this.opportunityList = data.list   //如果是想下滑动，刷新数据 就让items等于最新数据
                    } else {
                        this.opportunityList = this.opportunityList.concat(data.list) //否则就把数据拼接
                    }
                    if (data.list.length < 10) {
                        fn(true)
                    } else {
                        fn(false)
                    }
                    // 整理更新数据
                    // this.getBusinessData(data.list)
                    if (this.opportunityList.length < 1) {
                        this.showNoData = true;
                    }
                }, res => {
                    fn(true)
                    // this.showLoading = false;
                    if (offset == 1) {
                        this.nowAdd = 0
                        this.unRead = 0
                        this.opportunityList = []
                        this.showNoData = true;
                    }
                },res => {
                    fn(true)
                    // this.showLoading = false;
                    if (offset == 1) {
                        this.nowAdd = 0
                        this.unRead = 0
                        this.opportunityList = []
                        this.showNoData = true;
                    }
                })
            },
            // 整理更新的数据
            getBusinessData(dataList) {
                console.log('更新未读状态')
                let ids = []
                if (dataList.length > 0) {
                    for (let i = 0; i < dataList.length; i++) {
                        if (dataList[i].isAlreadyRead === 0) {
                            ids.push(dataList[i].id)
                        }
                    }
                    this.ids = ids.join(',')
                }
            },
            // 更新未读状态  离开页面调用
            upDateRead() {
                let obj = {ids: this.ids};
                window.jsObj.upDateRead(JSON.stringify(obj))
            },
            // 跳转分享详情
            goToVideoinfo(id) {
                 let obj = {
                    id: id
                };
                window.jsObj.intoShareDetail(JSON.stringify(obj))
            },

            // 跳转至商机设置
            goToSetting() {
                console.log('跳转至商机设置')
                let obj = {};
                window.jsObj.goToOpportunitySet(JSON.stringify(obj))
            },
            // 进入商机详情（某人的商机）
            goToTargetOpportunity(id, nickName, customerName, isCustomer, sourceId, unionId, customerNumber, universityUnionId) {
                // 至少存在一个才能跳转
                if (unionId || customerNumber || universityUnionId) {
                    // 商机设置 商机id 客户类别 客户编号
                    if (customerName || nickName) {
                        let title = this.setTitle(customerName, nickName)
                        console.log(title)
                        let obj = {
                            opportunityId: id,
                            cusOrWeChat: isCustomer,
                            sourceId: sourceId,
                            number: isCustomer == 1 ? customerNumber : (unionId || universityUnionId),
                            titleName: title
                        };
                        window.jsObj.goToTargetOpportunity(JSON.stringify(obj))
                    }
                }
            },
            // titleType   0:图文 1:名片 3:消息 4:文章 5:线上活动 6:线下活动
            // sourceId   0:偏好探测 1:转发分享 2:拓客工具 3:恒天财富APP 4:恒天官网
            // 动态标题
            setTitle(wechatName, custName) {
                console.log(wechatName, custName)
                let title = ''
                if (custName) {
                    let cust = Array.from(custName)
                    if (cust.length > 10) {
                        title = cust.slice(0, 9).join('') + '...的商机'
                    } else {
                        title = cust.slice(0, 9).join('') + '的商机'
                    }
                    return title
                }
                if (wechatName) {
                    let wechat = Array.from(wechatName)
                    if (wechat.length > 10) {
                        title = wechat.slice(0, 9).join('') + '...的商机'
                    } else {
                        title = wechat.slice(0, 9).join('') + '的商机'
                    }
                    return title
                }
            },
            // 进入文章热力图
            goToArticleHeatMap(id) {
                console.log('文章id', id)
                window.jsObj.goToArticleHeatMap("hot-detail?flag=1&id=" + id, id);
            },
            // 分享详情
            goToShareDetail(id) {
                console.log('名片 图文', id)
                let obj = {
                    id: id
                };
                window.jsObj.goToShareDetail(JSON.stringify(obj))
            },
            // 进入活动详情
            goToActivityDetail(type, id) {
                if (type == 5) {
                    // 线上
                    window.jsObj.gotoPageMaket("/onLineActivityDetail?actId=" + id, id);
                } else {
                    // 线下
                    window.jsObj.gotoPageMaket("/activityDetail?activityId=" + id, id);
                }
            },
            // 拨打电话（兼容ios13）
            callPhone(phone) {
                console.log(phone)
                // 校验电话
                let phoneCheck = /^1[3456789]\d{9}$/
                if (phoneCheck.test(phone)) {
                    let obj = {
                        phone: phone
                    }
                    window.jsObj.callPhone(JSON.stringify(obj))
                }
            },
            // 跳转备注提醒
            goToNoteRemind(id) {
                console.log(id)
                let obj = {
                    businessid: id
                }
                window.jsObj.goToNoteRemind(JSON.stringify(obj))
            }
        }
    }
</script>
